<template>
<div>

    <!--            标题-->
    <el-row  type="flex" justify="start" class="border_bottom">
        <el-col :span="2">
            <h3> 会员等级</h3>
        </el-col>
    </el-row>

    <el-row class="margin">
        <el-col :span="1">等级名称</el-col>
        <el-col :span="5">积分下限</el-col>
        <el-col :span="5">积分上限</el-col>
    </el-row>
        <el-row class="margin"  v-for="(item,index) in gradeArr" ref="inputForm">

            <el-col :span="1"><el-input style="width: 80px"  v-model="item.levelName" ></el-input></el-col>
            <el-col :span="5" :offset="1"><el-input style="width: 200px"  v-model="item.levelMin" ></el-input></el-col>
            <el-col :span="5"><el-input style="width: 200px"  v-model="item.levelMax"></el-input></el-col>
            <el-col :span="2" v-if="index==gradeArr.length-1" >

                    <el-button type="text" @click="delVip(item)" ref="btnArr">删除</el-button>
                    <el-button type="text" v-if="isAdd==false" @click="addSureVip()">确定</el-button>
                    <el-button v-else type="text" @click="addVip">添加</el-button>

            </el-col>

        </el-row>


    <el-row>
        <el-col :span="1">
            <el-button :plain="true"  type="primary"  @click="upVip">修改</el-button>


        </el-col>

    </el-row>


    <el-row class="zhu">
        <el-col :span="12">
            注：上一等级上限比下一等级下限少一积分,且同等级的积分上限比下限大.请按规则修改。


        </el-col>


    </el-row>


</div>


</template>

<script>
    export default {
        name: "MemberGrade",
      data(){
            return{

                gradeArr:[],
                isAdd:true,
                //是否符合规则
                isRight:true

            }
      },
        methods:{


            //显示会员等级管理
            getGrade(){
                //获取默认会员等级
                this.$axios.post('/api/level/levellist').then((res)=>{
                    this.gradeArr=res.data.data
                    console.log(this.gradeArr);
                })
            },


            upVip(){
               this.suitRule()
                if (this.isRight) {
                    console.log('修改请求')
                    console.log(this.gradeArr);
                    this.$axios.post('/api/level/update?levelList=',[...this.gradeArr]).then((res)=>{
                        console.log(res);
                    })
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });

                }



            },














            delVip(obj){
                //数组删除最后一个
                if (obj.levelMax==''||obj.levelMax==''||obj.levelName==''){
                    this.gradeArr.pop()
                }else {

                    this.$axios.post('/api//level/delete?level=',[...[obj.levelId]]

                    ).then((res)=>{
                        if (res.data.code === 200) {
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                            this.getGrade()
                        }else {
                            this.$message.error('删除失败！！')
                        }



                    })

                }




            },

            // 判断是否符和会员等级规则
            suitRule(){

                var  gradeArr=this.gradeArr
                for (let i = 0; i <gradeArr.length ; i++) {
                    if (i < gradeArr.length-1) {
                        if (Number(gradeArr[i].levelMax)  > gradeArr[i].levelMin && gradeArr[i+1].levelMin-Number(gradeArr[i].levelMax) ==1) {
                            this.isRight=true
                        }
                        else{
                            this.isRight=false
                            this.$message.error('修改失败！（请确保：上一等级上限比下一等级下限少一积分且同等级的积分上限比下限大）');

                            break

                        }
                    }
                }


            },


            //点击添加，添加一个输入行
            addVip(){
                this.isAdd=false
                this.gradeArr.push({levelId:'',levelMax:'',levelMin:'',levelName:''})
                this.$refs.btnArr.display='none'

            },
            //确定添加
    addSureVip(){
       this.suitRule()
        const obj = this.gradeArr.slice(-1)[0]
        if (obj.levelMax==''||obj.levelMax==''||obj.levelName==''){
            this.$message.error('信息请填写完整！！')
            this.gradeArr.pop()
            this.isAdd=true

        }else {


            if (this.isRight) {

                this.$axios({

                    url:'api/level/add',
                    method:'post',
                    params:obj
                }).then((res)=>{
                    console.log(res);


                    if (res.data.code == 1002) {

                        this.$message.error('该等级名称已经存在')
                    }
                    else {
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.isAdd=true
                        console.log(this.gradeArr);
                        this.getGrade()
                    }


                })

            }






        }




    }

        },
        created() {

this.getGrade()
        }


    }












</script>

<style scoped>
    .border_bottom {

        border-bottom: 1px solid grey;
    }
  .margin{
      margin-bottom: 10px;
      /*border-bottom: 1px solid grey;*/
      padding-bottom: 5px;
  }


  .zhu{
      margin-top: 100px;
      text-align: left;
  }

</style>